<template>
    <div class="bg">
        <el-card class="form-card">
            <template #header>
                <div class="card-header">
                    <span>注册</span>
                </div>
            </template>
            <el-form ref="formRef" :model="form" :rules="rules" status-icon label-width="80px">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" @change="handleChange"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model.trim="form.password" show-password autocomplete="off" />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model.trim="form.checkPass" show-password autocomplete="off" />
                </el-form-item>
                <el-form-item label="姓名" prop="fullname">
                    <el-input v-model="form.fullname" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机" prop="tel">
                    <el-input v-model="form.tel" />
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.isAgree" label="同意本站用户协议" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSubmit(formRef)" :disabled="!form.isAgree" type="primary">注册</el-button>
                </el-form-item>
            </el-form>
            <el-row justify="space-between">
                <el-col :span="5">
                    <el-link href="/#/login" type="info">登录账户</el-link>
                </el-col>
                <el-col :span="6">
                    <el-link type="info">忘记密码？</el-link>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import Admin from '@/api/admin';
// model
let form = reactive({
    username: '',
    password: '',
    checkPass: '',
    fullname: '',
    sex: '男',
    tel: '',
    isAgree: false,
});
// let isvolid = false;
// 获取form组件实例对象
let formRef = ref();
// 密码框
const validatePass = (rule, value, callback) => {
    // 非空校验
    if (value === '') {
        callback(new Error('请输入密码！'))
        return;
    }
    // 有效性校验
    let isValid = /\d{3,}/.test(value);
    if (!isValid) {
        callback(new Error('密码长度至少3位数字！'));
        return;
    };
    // 校验确认密码框
    if (form.checkPass) {
        formRef.value?.validateField('checkPass', () => null);
    }
    // 全部通过校验
    callback();
}
// 二次确认密码
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码！'));
        return;
    }
    // 两次密码不一致
    if (value !== form.password) {
        callback(new Error("两次输入密码不一致!"));
        return;
    }
    // 全部通过校验
    callback();
}

// 表单验证规则
const rules = reactive({
    username: [
        { required: true, message: '请输入账号！', trigger: 'blur' },
        { min: 3, max: 30, message: '账户长度要求3-30个字符之间', trigger: 'blur' },
    ],
    password: [
        {required: true, validator: validatePass, trigger: 'blur' },
    ],
    checkPass: [
        { required: true,validator: validatePass2, trigger: 'blur' },
    ],
    fullname: [
        { required: true, message: '请输入姓名！', trigger: 'blur' },
        { min: 2, max: 30, message: '姓名至少2个字符！', trigger: 'blur' },
    ],
    sex: [
        { required: true, message: '请选择性别！', trigger: 'change' },
    ],
    tel: [
        { required: true, message: '请输入手机号码！', trigger: 'blur' },
        { pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: '手机号码不符合规则！', trigger: 'blur' },
    ],
});
async function handleChange(){
   
    let {status,msg,data}= await Admin.check({...form})
    if(status){
        ElMessage.success(msg)
    }else{
        ElMessage.error(msg)
    }

}
function handleSubmit(formEl) {
    // 校验整个表单
    formEl.validate(async(valid, fields) => {
        if (valid) {
            // 通过校验
            let {status,msg,data}= await Admin.register({...form})
          if(status){
            //注册成功
            sessionStorage.id = data.id;
            sessionStorage.role = data.role;
            sessionStorage.token = data.token;
            //跳转页面
            // router.push('/article/list')
          }else{
            //注册失败
            ElMessage.error(msg)
          }

        } 
     else{
            // 校验失败
            console.log('失败字段', fields);
        }
    });
}
</script>

<style lang="less" scoped>
.bg {
    position: relative;
    min-height: 100vh;
    background: url(../assets/img/register/bg.jpg) top center;
    background-size: cover;

    .form-card {
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        width: 360px;
    }
}
</style>
